<template>
    <div class="x1">
        <div class="left">
            <el-form :model="info" label-width="auto" >
                <el-form-item label="用户名">
                    <el-input v-model="info.username" disabled />
                </el-form-item>

                <el-form-item label="电话">
                    <el-input v-model="info.phone" />
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="info.gender" placeholder="请选择性别">
                        <el-option label="保密" :value="0" />
                        <el-option label="男" :value="1" />
                        <el-option label="女" :value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="头像">
                    <uploadImage :src="info.avatar" @update:src="info.avatar = $event" />
                </el-form-item>
                <el-button style="float: right;" @click="onSubmit">提交修改</el-button>
            </el-form>
        </div>
        <div class="right">
            <el-form :model="password" label-width="auto" >
                <el-form-item label="旧密码">
                    <el-input v-model="password.oldPassword" />
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input v-model="password.newPassword1" />
                </el-form-item>
                <el-form-item label="确认密码">
                    <el-input v-model="password.newPassword2" />
                </el-form-item>
                <el-button style="float: right;" type="primary" @click="onSubmitPwd">修改密码</el-button>
            </el-form>

        </div>

    </div>
</template>
<script setup>
import uploadImage from './uploadImage.vue';
// 导入Store
import { ElMessage } from 'element-plus';
import { baseUrl } from '@/utils/http.js'
import { putUserInfo, resetPwd } from '@/api/personal.js'

import { ref, unref } from 'vue';

const props = defineProps({
    info: {
        type: Object,
        required: true
    }
})
const password = ref({
    oldPassword: "",
    newPassword1: "",
    newPassword2: ""
})

const onSubmit = async () => {

    console.log(props.info);
    const res = await putUserInfo(props.info)
    if (res.status == 200) {
        ElMessage.success("修改成功")
    }
}

const onSubmitPwd = async () => {
    console.log(password);
    const res = await resetPwd(unref(password))
    if (res.status == 200) {
        ElMessage.success("修改成功")
    }
}


</script>
<style lang="scss" scoped>

.x1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    .left {
        min-width: 400px;
    }
    .right{
        min-width: 400px;
    }
}
</style>